<template>
    <div class="flag">
        <div class="flex">
            <div class="flagleft"><span class="iconfont icon-flag-fill i1"> </span></div>
            <div class="flagright">
                <el-input type="textarea" :rows="3" placeholder="请输入内容" :disabled="textarea11" v-model="textarea1"></el-input>
                <div v-if="textarea11"><el-button type="danger" @click="fix(1)">编辑</el-button></div>
                <div v-if="!textarea11"><el-button type="danger" @click="yes(1)">保存</el-button><el-button type="danger" @click="no(1)">取消</el-button></div>
            </div>
        </div>
        <div class="flex">
            <div class="flagleft"><span class="iconfont icon-flag-fill i2"> </span></div>
            <div class="flagright">
                <el-input type="textarea" :rows="3" placeholder="请输入内容" :disabled="textarea22" v-model="textarea2"></el-input>
                <div v-if="textarea22"><el-button type="danger" @click="fix(2)">编辑</el-button></div>
                <div v-if="!textarea22"><el-button type="danger" @click="yes(2)">保存</el-button><el-button type="danger" @click="no(2)">取消</el-button></div>
            </div>
        </div>
        <div class="flex">
            <div class="flagleft"><span class="iconfont icon-flag-fill i3"> </span></div>
            <div class="flagright">
                <el-input type="textarea" :rows="3" placeholder="请输入内容" :disabled="textarea33" v-model="textarea3"></el-input>
                <div v-if="textarea33"><el-button type="danger" @click="fix(3)">编辑</el-button></div>
                <div v-if="!textarea33"><el-button type="danger" @click="yes(3)">保存</el-button><el-button type="danger" @click="no(3)">取消</el-button></div>
            </div>
        </div>
        <div class="flex">
            <div class="flagleft"><span class="iconfont icon-flag-fill i4"> </span></div>
            <div class="flagright">
                <el-input type="textarea" :rows="3" placeholder="请输入内容" :disabled="textarea44" v-model="textarea4"></el-input>
                <div v-if="textarea44"><el-button type="danger" @click="fix(4)">编辑</el-button></div>
                <div v-if="!textarea44"><el-button type="danger" @click="yes(4)">保存</el-button><el-button type="danger" @click="no(4)">取消</el-button></div>
            </div>
        </div>
        <div class="flex">
            <div class="flagleft"><span class="iconfont icon-flag-fill i5"> </span></div>
            <div class="flagright">
                <el-input type="textarea" :rows="3" placeholder="请输入内容" :disabled="textarea55" v-model="textarea5"></el-input>
                <div v-if="textarea55"><el-button type="danger" @click="fix(5)">编辑</el-button></div>
                <div v-if="!textarea55"><el-button type="danger" @click="yes(5)">保存</el-button><el-button type="danger" @click="no(5)">取消</el-button></div>
            </div>
        </div>
        <div class="flex">
            <div class="flagleft"><span class="iconfont icon-flag-fill i6"> </span></div>
            <div class="flagright">
                <el-input type="textarea" :rows="3" placeholder="请输入内容" :disabled="textarea66" v-model="textarea6"></el-input>
                <div v-if="textarea66"><el-button type="danger" @click="fix(6)">编辑</el-button></div>
                <div v-if="!textarea66"><el-button type="danger" @click="yes(6)">保存</el-button><el-button type="danger" @click="no(6)">取消</el-button></div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    export default{
    	name: 'flag',
    	data(){
    		return{
                textarea1:"",
                textarea11:true,
                textarea2:"",
                textarea22:true,
                textarea3:"",
                textarea33:true,
                textarea4:"",
                textarea44:true,
                textarea5:"",
                textarea55:true,
                textarea6:"",
                textarea66:true,
                textarea7:"",
                textarea77:true,
                chooseid:""
    		}
    	},
    	created() {
    		this.getlist();
    	},
        methods:{
            getlist:function(){
                axios.get('/api/gth/shop/flag/info')
                    .then(response => {
                           this.textarea1 = response.data.data[0].flag
                           this.textarea2 = response.data.data[1].flag
                           this.textarea3 = response.data.data[2].flag
                           this.textarea4 = response.data.data[3].flag
                           this.textarea5 = response.data.data[4].flag
                           this.textarea6 = response.data.data[5].flag
                    })
            },
            fix:function(num){
                switch(num){
                    case 1:
                    this.textarea11 = false
                    this.chooseid = 0
                    break;
                    case 2:
                    this.textarea22 = false
                    this.chooseid = 1
                    break;
                    case 3:
                    this.textarea33 = false
                    this.chooseid = 2
                    break;
                    case 4:
                    this.textarea44 = false
                    this.chooseid = 3
                    break;
                    case 5:
                    this.textarea55 = false
                    this.chooseid = 4
                    break;
                    case 6:
                    this.textarea66 = false
                    this.chooseid = 5
                    break;
                    case 7:
                    this.textarea77 = false
                    this.chooseid = 6
                    break;
                }
            },
            yes:function(num){
                switch(num){
                    case 1:
                    this.textarea11 = true
                    axios.post('/api/plan-market/shop/flag/update',{type:this.chooseid,flag:this.textarea1})
                        .then(response => {
                            if(response.data.msg.code == 0) {
                                this.$message({
                                  message: "修改状态成功",
                                  type: "success"
                                });
                                this.getlist()
                            }else {
                                this.$message.error(response.data.msg.info);
                            }
                            
                        })
                    break;
                    case 2:
                    this.textarea22 = true
                    axios.post('/api/plan-market/shop/flag/update',{type:this.chooseid,flag:this.textarea2})
                        .then(response => {
                            if(response.data.msg.code == 0) {
                                this.$message({
                                  message: "修改状态成功",
                                  type: "success"
                                });
                                this.getlist()
                            }else {
                                this.$message.error(response.data.msg.info);
                            }
                            
                        })
                    break;
                    case 3:
                    this.textarea33 = true
                    axios.post('/api/plan-market/shop/flag/update',{type:this.chooseid,flag:this.textarea3})
                        .then(response => {
                            if(response.data.msg.code == 0) {
                                this.$message({
                                  message: "修改状态成功",
                                  type: "success"
                                });
                                this.getlist()
                            }else {
                                this.$message.error(response.data.msg.info);
                            }
                            
                        })
                    break;
                    case 4:
                    this.textarea44 = true
                    axios.post('/api/plan-market/shop/flag/update',{type:this.chooseid,flag:this.textarea4})
                        .then(response => {
                            if(response.data.msg.code == 0) {
                                this.$message({
                                  message: "修改状态成功",
                                  type: "success"
                                });
                                this.getlist()
                            }else {
                                this.$message.error(response.data.msg.info);
                            }
                            
                        })
                    break;
                    case 5:
                    this.textarea55 = true
                    axios.post('/api/plan-market/shop/flag/update',{type:this.chooseid,flag:this.textarea5})
                        .then(response => {
                            if(response.data.msg.code == 0) {
                                this.$message({
                                  message: "修改状态成功",
                                  type: "success"
                                });
                                this.getlist()
                            }else {
                                this.$message.error(response.data.msg.info);
                            }
                            
                        })
                    break;
                    case 6:
                    this.textarea66 = true
                    axios.post('/api/plan-market/shop/flag/update',{type:this.chooseid,flag:this.textarea6})
                        .then(response => {
                            if(response.data.msg.code == 0) {
                                this.$message({
                                  message: "修改状态成功",
                                  type: "success"
                                });
                                this.getlist()
                            }else {
                                this.$message.error(response.data.msg.info);
                            }
                            
                        })
                    break;
                    case 7:
                    this.textarea77 = true
                    axios.post('/api/plan-market/shop/flag/update',{type:this.chooseid,flag:this.textarea7})
                        .then(response => {
                            if(response.data.msg.code == 0) {
                                this.$message({
                                  message: "修改状态成功",
                                  type: "success"
                                });
                                this.getlist()
                            }else {
                                this.$message.error(response.data.msg.info);
                            }
                            
                        })
                    break;
                }
            },
            no:function(num){
                switch(num){
                    case 1:
                    this.textarea11 = true
                    break;
                    case 2:
                    this.textarea22 = true
                    break;
                    case 3:
                    this.textarea33 = true
                    break;
                    case 4:
                    this.textarea44 = true
                    break;
                    case 5:
                    this.textarea55 = false
                    break;
                    case 6:
                    this.textarea66 = true
                    break;
                    case 7:
                    this.textarea77 = true
                    break;
                }
            }
        }
    }
</script>

<style lang="scss" scoped="scoped">
    .flag{
        padding: 20px;
        .flex{ display: flex; align-items: center; margin-bottom: 10px;}
        .flagleft{ flex-basis: 100px; text-align: center; margin-top: -60px;
            .iconfont{ font-size: 30px; }
        }
        .flagright{ flex-basis: 600px;
            .el-button{ margin-top: 10px;}
        }

        .i1{ color: #e4dfd7;}
        .i2{ color: #ee3f4d;}
        .i3{ color: #ebb10d;}
        .i4{ color: #229453;}
        .i5{ color: #2775b6;}
        .i6{ color: #8076a3;}

    }
</style>
